<template>
  <div class="nb_icon_wrap">
    <div class="nb_icon_wrap-t">
      <div
        :class="
          idx === i.id
            ? 'fouc-item-start'
            : idx - 1 === i.id
            ? 'fouc-item-end'
            : idx === 0
            ? i.id === 2
              ? 'fouc-item-end'
              : ''
            : ''
        "
        v-for="i in SxData"
        :key="i.id"
      >
        <a :href="i.href" target="_blank">
          <i><em></em></i>
          <p class="wzycslh">{{ i.title }}</p>
        </a>
      </div>
    </div>
    <div class="nb_icon_wrap-b">
      <a :href="HrefHandler('undefined')" target="_blank"></a>
    </div>
  </div>
</template>
<script setup>
// @ts-nocheck
import { ref, getCurrentInstance } from "vue";
const HrefHandler = (v) => {
  return (
    "https://affim.baidu.com/cps5/chatIndex?siteToken=1592882751da134d1450a7e08b16ffcb&speedLogId=167335772397893c7_1673357723978_03200&reqParam=%7B%22from%22%3A0,%22sessionid%22%3A%22-100%22,%22siteId%22%3A%2217865090%22,%22tid%22%3A%22-1%22,%22userId%22%3A%2239789408%22,%22ttype%22%3A1,%22siteConfig%22%3A%7B%22eid%22%3A%2239789408%22,%22queuing%22%3A%22%22,%22isCsOnline%22%3A0,%22siteToken%22%3A%221592882751da134d1450a7e08b16ffcb%22,%22userId%22%3A%2239789408%22,%22isGray%22%3A%22false%22,%22vstProto%22%3A1,%22likeVersion%22%3A%22generic%22,%22siteId%22%3A%2217865090%22,%22online%22%3A%22true%22,%22startTime%22%3A1673357723736,%22webRoot%22%3A%22https%3A%2F%2Faffim.baidu.com%2Fcps5%2F%22,%22bid%22%3A%22167335327670819727%22,%22isSmallFlow%22%3A0,%22isPreonline%22%3A0,%22userCommonSwitch%22%3A%7B%22isOpenTelCall%22%3Afalse,%22isOpenCallDialog%22%3Afalse,%22isOpenStateOfRead%22%3Atrue,%22isOpenVisitorLeavingClue%22%3Atrue,%22isOpenVoiceMsg%22%3Atrue,%22isOpenVoiceCom%22%3Atrue%7D,%22invited%22%3A0%7D,%22config%22%3A%7B%22themeColor%22%3A%2241a8f8%22%7D%7D&hotIssue=" +
    v
  );
};
// 数据
const SxData = [
  {
    id: 0,
    title: "现在有优惠活动吗?",
    href: HrefHandler("现在有优惠活动吗"),
  },
  {
    id: 1,
    title: "可以介绍一下你们哦。",
    href: HrefHandler("可以介绍一下你们哦。"),
  },
  {
    id: 2,
    title: "你们是怎么收费的呀?",
    href: HrefHandler("你们是怎么收费的呀"),
  },
];
// 处理 流动函数
const idx = ref(0);
let idxTimer = null;
const { proxy } = getCurrentInstance();
const IFUN = function (v) {
  clearTimeout(idxTimer);
  if (idx.value >= 2) {
    idx.value = 0;
  } else {
    idx.value += 1;
  }
  idxTimer = setTimeout(IFUN, 2000);
};
setTimeout(IFUN, 2000);
</script>
<style scoped>
.nb_icon_wrap {
  width: 8rem;
  height: 5rem;
  position: fixed;
  top: 2.6rem;
  right: 0.5rem;
  z-index: 10000;
}
.nb_icon_wrap-t {
  width: 100%;
  height: 1.8rem;
  position: relative;
}
.nb_icon_wrap-t div {
  height: 1.2rem;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 0.9rem;
  margin-bottom: 0.2rem;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.nb_icon_wrap-t div a {
  display: block;
  color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.nb_icon_wrap-t div i {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  background-color: #9861e6;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 50%;
  margin-left: 0.2rem;
}
.nb_icon_wrap-t div i em {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  background: url("/img/icon.png") no-repeat;
  background-size: 0.6rem 0.6rem;
}
.nb_icon_wrap-t div p {
  display: block;
  padding: 0 0.2rem;
  line-height: 1.2rem;
  font-size: 0.45rem;
}
.nb_icon_wrap-b {
  width: 2rem;
  height: 2rem;
  margin-left: 6rem;
  background-image: url("/img/mobile-icon-5.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.nb_icon_wrap-b a {
  display: block;
  width: 100%;
  height: 100%;
}
.fouc-item-start {
  animation: fouc-item-start 2s ease-in-out;
}
.fouc-item-end {
  animation: fouc-item-end 2s ease-in-out;
}
@keyframes fouc-item-start {
  from {
    transform: translateY(1.5rem);
    opacity: 0;
  }
  to {
    transform: translateY(0rem);
    opacity: 1;
  }
}
@keyframes fouc-item-end {
  from {
    transform: translateY(0rem);
    opacity: 1;
  }
  to {
    transform: translateY(-1.5rem);
    opacity: 0;
  }
}
</style>